const images = document.querySelector(".images")
const but = document.querySelector("button")
const thumb = document.querySelector(".thumb-bar")//添加到div元素中
const overlay = document.querySelector(".overlay")
//创建一个数组对象存放图片
// const Arr= new Array();
// Arr[0].src="images/pic1.jpg"
// Arr[1].src="images/pic2.jpg"
// Arr[2].src="images/pic3.jpg"
// Arr[3].src="images/pic4,jpg"
// Arr[4].src="images/pic5.jpg"
const Arr = [];
Arr[0] = { src: "images/pic1.jpg" };
Arr[1] = { src: "images/pic2.jpg" };
Arr[2] = { src: "images/pic3.jpg" };
Arr[3] = { src: "images/pic4.jpg" };
Arr[4] = { src: "images/pic5.jpg" };

for(var i =0; i<Arr.length;i++){
    const ima = document.createElement("img")
    ima.setAttribute("src",Arr[i].src)
    ima.setAttribute('alt',Arr[i].src)
    thumb.appendChild(ima)//添加到div元素中
    ima.addEventListener('click',(e)=>{
        images.src = e.target.src
        images.alt = e.target.alt
    })

}
function radom(number){
    return Math.floor(Math.random()*number)
}
function bgChange(){
    const rgb = `rgb(${radom(256)} ${radom(256)} ${radom(256)})`
    return rgb
}
but.addEventListener("click",()=>{
    console.log(1212)
    but.getAttribute("class");
    // btn.textContent = xxx;
    overlay.style.backgroundColor = bgChange();
    console.log(33333)
})

